﻿<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="OrcasThemes">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
   <title>登录注册</title>
   <link href="css/bootstrap.css" rel="stylesheet">
   <link rel="stylesheet" href="css/screen.css">
   <link rel="stylesheet" href="css/animation.css">
   <link rel="stylesheet" href="css/font-awesome.css">
   <link href="css/lity.css" rel="stylesheet">
   <link rel="stylesheet" href="css/mymain.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
   <!-- LOGIN -->
   <div id="login" class="container-fluid standard-bg">
      <!-- HEADER -->
      <div class="row header-top">
         <div class="col-lg-3 col-md-6 col-sm-5">
            <a class="main-logo" href="index.html"><img src="img/main-logo.png" class="main-logo" alt="Muvee Reviews"
                  title="Muvee Reviews"></a>
         </div>
      </div>
      <!-- MENU -->
      <div class="row home-mega-menu ">
         <div class="col-md-12">
            <nav class="navbar navbar-default">
               <div class="navbar-header">
                  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
                     <span class="sr-only">导航栏</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                  </button>
               </div>
               <div class="collapse navbar-collapse js-navbar-collapse megabg dropshd ">
               </div>
               <!-- /.nav-collapse -->
            </nav>
         </div>
      </div>
      <!-- LOGIN -->
      <div class="row">
         <div class="container">
            <section class="registration col-lg-12 col-md-12">
               <div class="row secBg">
                  <div class="large-12 columns">
                     <div class="login-register-content">
                        <div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
                           <div class="col-md-6 text-center login-header">
                              <h2 class="title main-head-title"></h2>
                              <p></p>
                           </div>
                           <div class="clearfix spacer"></div>
                           <div class="col-md-6" id="login-form">
                              <div class="register-form">
                                 <h2 class="title main-head-title">登录</h2>
                                 <form id="login_form" method="post" data-abide novalidate>
                                    <div class="input-group">
                                       <p>用户名</p>
                                       <span class="fa fa-user login-inputicon"></span>
                                       <input id="username" type="text" placeholder="输入用户名" required>
                                    </div>
                                    <div class="input-group">
                                       <p>密码</p>
                                       <span class="fa fa-lock login-inputicon"></span>
                                       <input id="password" type="password" placeholder="输入密码" required>
                                    </div>
                                    <div class="checkbox">
                                       <input id="remember" type="checkbox" name="check" value="remember">
                                       <label class="customLabel" for="remember">记住我</label>
                                    </div>
                                    <div class="login-btn-box">
                                       <button class="access-btn" type="submit" name="submit">确认登录</button>
                                       <button type="button" class="access-btn" id="toggle-to-register">注册</button>
                                    </div>
                                 </form>
                              </div>
                           </div>
                           <div class="col-md-6" id="register-form" style="display: none;">
                              <div class="register-form">
                                 <h2 class="title main-head-title">注册新用户</h2>
                                 <form id="register_form" method="post" data-abide novalidate>
                                    <div class="input-group">
                                       <p>个人名称</p>
                                       <span class="fa fa-user-circle login-inputicon"></span>
                                       <input type="text" placeholder="输入个人名称" required>
                                    </div>
                                    <div class="input-group">
                                       <p>用户名</p>
                                       <span class="fa fa-user login-inputicon"></span>
                                       <input type="text" placeholder="输入用户名" required>
                                    </div>
                                    <div class="input-group">
                                       <p>密码</p>
                                       <span class="fa fa-lock login-inputicon"></span>
                                       <input type="password" id="register_password" placeholder="输入密码" required>
                                    </div>
                                    <div class="input-group">
                                       <p>再次输入密码</p>
                                       <span class="fa fa-lock login-inputicon"></span>
                                       <input type="password" id="confirm_password" placeholder="再次输入密码" required>
                                    </div>
                                    <div class="login-btn-box">
                                       <button type="submit"  class="access-btn" name="submit">确认注册</button>
                                       <button type="button" class="access-btn" id="toggle-to-login">登录</button>
                                    </div>
                                 </form>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </section>
         </div>
         <!-- BOTTOM BANNER -->
         <!-- <div id="bottom-banner" class="container text-center">
            <a href="" class="banner-xl">
               <img src="img/banners/banner-xl.jpg" class="img-responsive"
                  alt="Buy Now Muvee Reviews Bootstrap HTML5 Template"
                  title="Buy Now Muvee Reviews Bootstrap HTML5 Template">
            </a>
         </div> -->
      </div>
   </div>
   <!-- FOOTER -->
   <div id="footer" class="container-fluid footer-background">
      <div class="container">
         <footer>
            <!-- <div class="row">
               <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                  <div class="row auto-clear">
                     <div class="col-md-12">
                     </div>
                     <div class="col-md-12">
                        <ul class="social">
                           <li class="social-facebook"><a href="#" class="fa fa-facebook social-icons"></a></li>
                           <li class="social-google-plus"><a href="#" class="fa fa-google-plus social-icons"></a></li>
                           <li class="social-twitter"><a href="#" class="fa fa-twitter social-icons"></a></li>
                           <li class="social-youtube"><a href="#" class="fa fa-youtube social-icons"></a></li>
                           <li class="social-rss"><a href="#" class="fa fa-rss social-icons"></a></li>
                        </ul>
                     </div>
                     <div class="col-md-12">
                        <p>Aliquam feugiat turpis quis felis adipiscing, non pulvinar odio lacinia. Aliquam elementum
                           pharetra fringilla. Duis blandit, sapien in semper vehicula, tellus elit gravida odio, ac
                           tincidunt nisl mi at ante. Vivamus tincidunt nunc nibh. Duis blandit, sapien in semper
                           vehicula</p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                  <h2 class="title">popular tags</h2>
                  <ul class="footer-tags">
                     <li><a href="#">videos</a></li>
                     <li><a href="#">premium</a></li>
                     <li><a href="#">hair</a></li>
                     <li><a href="#">beauty</a></li>
                     <li><a href="#">ranking</a></li>
                     <li><a href="#">lifestyle</a></li>
                     <li><a href="#">sport</a></li>
                     <li><a href="#">money</a></li>
                     <li><a href="#">comments</a></li>
                  </ul>
               </div>
               <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                  <h2 class="title">PREMIUM inside?</h2>
                  <div class="row auto-clear">
                     <div class="col-lg-6 col-md-6 col-sm-6 post post-medium">
                        <div class="thumbr">
                           <a class="post-thumb" href="" data-lity title="Video Title Goes Here">
                              <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                    aria-hidden="true"></i></span>
                              <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                              <img class="img-responsive" src="img/thumbs/thumb-s.jpg" alt="#">
                           </a>
                        </div>
                     </div>
                     <div class="col-lg-6 col-md-6 col-sm-6 post post-medium">
                        <div class="thumbr">
                           <a class="post-thumb" href="" data-lity title="Video Title Goes Here">
                              <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                    aria-hidden="true"></i></span>
                              <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                              <img class="img-responsive" src="img/thumbs/thumb-s2.jpg" alt="#">
                           </a>
                        </div>
                     </div>
                     <div class="col-lg-6 col-md-6 col-sm-6 post post-medium">
                        <div class="thumbr">
                           <a class="post-thumb" href="" data-lity title="Video Title Goes Here">
                              <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                    aria-hidden="true"></i></span>
                              <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                              <img class="img-responsive" src="img/thumbs/thumb-s4.jpg" alt="#">
                           </a>
                        </div>
                     </div>
                     <div class="col-lg-6 col-md-6 col-sm-6 post post-medium">
                        <div class="thumbr">
                           <a class="post-thumb" href="" data-lity title="Video Title Goes Here">
                              <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                    aria-hidden="true"></i></span>
                              <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                              <img class="img-responsive" src="img/thumbs/thumb-s3.jpg" alt="#">
                           </a>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                  <h2 class="title">most viewed</h2>
                  <ul class="footer-menu-links">
                     <li class="fa fa-chevron-right"><a href="#">About Us</a></li>
                     <li class="fa fa-chevron-right"><a href="#">Categories</a></li>
                     <li class="fa fa-chevron-right"><a href="#">Features</a></li>
                     <li class="fa fa-chevron-right"><a href="#">Pages</a></li>
                     <li class="fa fa-chevron-right"><a href="#">Gallery</a></li>
                  </ul>
               </div>
            </div> -->
            <div class="row copyright-bottom text-center">
					<div class="col-md-12 text-center">
						<a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5 template">
							<img src="img/footer-logo.png" class="img-fixed-width text-center pull-left"
								alt="Video Magazine Bootstrap HTML5 template">
						</a>
						<div class="clearfix"></div>
						<p>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank"
								href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>

					</div>
				</div>
         </footer>
      </div>
   </div>
   <!-- MODAL -->
   <!-- <div id="enquirypopup" class="modal fade in " role="dialog">
      <div class="modal-dialog">
         <div class="modal-content row">
            <div class="modal-header custom-modal-header">
               <button type="button" class="close" data-dismiss="modal">×</button>
               <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>free access</h2>
            </div>
            <div class="modal-body">
               <form name="info_form" class="form-inline" onsubmit="return false;" method="post">
                  <div class="form-group col-sm-12">
                     <input type="text" class="form-control" name="name" id="name" placeholder="Enter Name">
                  </div>
                  <div class="form-group col-sm-12">
                     <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email">
                  </div>
                  <div class="form-group col-sm-12">
                     <button class="subscribe-btn pull-right" type="submit" title="Subscribe">Subscribe</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div> -->
</body>
<!-- JAVA SCRIPT -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
   $(".nav .dropdown").hover(function () {
      $(this).find(".dropdown-toggle").dropdown("toggle");
   });
</script>

<script type="module" src="./js/login.js"></script>
<script src="./js/register.js"></script>
<script>
   document.getElementById('toggle-to-register').addEventListener('click', function() {
      document.getElementById('login-form').style.display = 'none'; // 确保这里的 id 是 login-form
      document.getElementById('register-form').style.display = 'block';
      //document.getElementById('form-title').innerText = 'User Registration';
      //document.getElementById('form-description').innerText = 'Fill in the details below to create an account.';
   });

   document.getElementById('toggle-to-login').addEventListener('click', function() {
      document.getElementById('register-form').style.display = 'none';
      document.getElementById('login-form').style.display = 'block'; // 确保这里的 id 是 login-form
      //document.getElementById('form-title').innerText = 'User Login';
      //document.getElementById('form-description').innerText = 'Please enter your credentials to login.';
   });
</script>
</html>